<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#000" type="transparentFixed" title=" "></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="h-bg" :style="'background-image: url('+headBgImg+');'"></view>
		<view class="main">
			<view class="flex j-between align-item bt">
				<!-- 切换栏 -->
				<view class="qiehuan flex align-item">
					<view class="qiehuan-item flex align-item column">
						<view class="qiehuan-item-tit-com" :class="type == 1 ? 'qiehuan-item-tit-on' : 'qiehuan-item-tit'" @click="change(1)">
							男
						</view>
						<view class="qiehuan-item-icon" v-if="type == 1"></view>
					</view>
					<view class="qiehuan-item flex align-item column">
						<view class="qiehuan-item-tit-com" :class="type == 0 ? 'qiehuan-item-tit-on' : 'qiehuan-item-tit'" @click="change(0)">
							女
						</view>
						<view class="qiehuan-item-icon" v-if="type == 0"></view>
					</view>
				</view>
				<view class="box-item">
					<u-search placeholder="搜索" v-model="keyword" :show-action="false" bgColor="#FFFFFF" placeholderColor="#BDC5D4" @search="search()"></u-search>
				</view>
			</view>
			
			<!-- 瀑布流 -->
			<view class="waterfall-box h-flex-x h-flex-2">
				<view>
					<helang-waterfall 
						v-for="(item,index) in leftList" 
						:key="index" 
						:params="item" 
						tag="left"
						:index="index"
						@height="onHeight"
						@click="onClick"
						@collection="collection"
					></helang-waterfall>
				</view>
				<view>
					<helang-waterfall 
						v-for="(item,index) in rightList" 
						:key="index" 
						:params="item" 
						@height="onHeight"
						@click="onClick"
						tag="right"
						:index="index"
						@collection="collection"
					></helang-waterfall>
				</view>
			</view>
			<view class="load-txt">{{ajax.loadTxt}}</view>
		</view>
	</view>
</template>

<script>
import helangWaterfall from "@/uni_modules/helang-waterfall/components/helang-waterfall/helang-waterfall.vue"
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			imgUrl: this.$http.baseUrl, // 服务器域名
			headBgImg: this.$http.baseUrl + 'static/web/img/apply-bg.png', //顶部背景图片 
			type: 1, // 切换栏
			// 图片瀑布流
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			ajax: {
				// 是否可以加载
				load: true,
				// 加载中提示文字
				loadTxt: '',
				// 每页的请求条件
				rows:10,
				// 页码
				page:1,
			},
			keyword: '', // 搜索条件--顶部搜索框
		};
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad(e) {
		this.type = e.type
	},
	//页面显示
	onShow() {
		var that = this
		var userInfo = this.$store.state.userInfo;
		that.uid = userInfo.uid;
		uni.$on('updateData', function(data) {
			that.searchData = data
			that.searchLength = Object.keys(data).length
		})
		that.leftHeight = 0
		that.rightHeight = 0
		that.ajax.page = 1;
		that.leftList = []
		that.rightList = []
		that.getList();
	},
	components: {
		"helang-waterfall": helangWaterfall
	},
	onReady() {
	},
	// 触底触发
	onReachBottom() {
		this.getList();
	},
	// 下拉刷新
	onPullDownRefresh(){
		// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
		setTimeout(()=>{
			this.ajax.page = 1;
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.ajax.load = true;
			this.getList();
		},800);
	},
	//方法
	methods: {
		// 搜索 获取搜索框的值
		input(){
			
		},
		// 点击搜索
		search(){
			var that = this;
			that.ajax.page = 1;
			that.leftHeight = 0
			that.rightHeight = 0
			that.leftList = []
			that.rightList = []
			that.getList()
		},
		// 图片瀑布流
		// 监听高度变化
		onHeight(height, tag) {
			if (tag == 'left') {
				this.leftHeight += height;
			} else {
				this.rightHeight += height;
			}
		},
		// 组件点击事件
		onClick(index,a,b){
			uni.navigateTo({
				url: '/pages/home/matchmaker_user_detail/matchmaker_user_detail?authentication_id=' + index.authentication_id + '&a=' + a + '&b=' + b
			})
		},
		// 获取数据
		getList() {
			var that = this
			var sex
			if(that.type == 1){
				sex = '男'
			}else{
				sex = '女'
			}
			that.$http.get('api/ZhAuthentication/index',{...that.ajax,'real_name':that.keyword,'sex': sex,'is_vip':1}).then(res => {
					if(res){
						that.addList(res.data)
					}
				});
		},
		addList(res) {
			// 获取到的数据，请注意数据结构
			console.log(res);
			
			if(!res || res.length < 1){
				this.ajax.loadTxt = '没有更多了';
				return;
			}

			// 左右列表高度的差
			let differ = this.leftHeight - this.rightHeight;
			// 计算差值，用于确定优先插入那一边
			let differVal = 0;
							
			// 初始化左右列表的数据
			let i = differ > 0 ? 1 : 0;
			
			let [left, right] = [
				[],
				[]
			];
			
			
			// 获取插入的方向
			let getDirection = (index)=>{
				/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
				if(differ>= 600 && index < 3){
					differVal = 1;
					return 'right';
				}
				
				/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
				if(differ <= -600 && index < 3){
					differVal = -1;
					return 'left';
				}
				
				/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
				if(differ >= 350 && index < 2){
					return 'right';
				}
				/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
				if(differ <= -350 && index < 2){
					differVal = -1;
					return 'left';
				}
				
				/* 当前数据序号为偶数时，则插入到左边 */
				if ((i+differVal) % 2 == 0) {
					return 'left';
				} else {
					/* 当前数据序号为奇数时，则插入到右边 */
					return 'right';
				}
			}
			
			// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
			res.forEach((item, index) => {
				if(getDirection(index) == 'left'){
					//console.log(`差值：${differ},方向：left，序号${index}`)
					left.push(item);
				}else{
					//console.log(`差值：${differ},方向：right，序号${index}`)
					right.push(item);
				}
				i++;
			});
			
			// 将左右列表的数据插入，第一页时则覆盖
			if(this.ajax.page == 1){
				this.leftList = left;
				this.rightList = right;
				uni.stopPullDownRefresh();
			}else{
				this.leftList = [...this.leftList, ...left];
				this.rightList = [...this.rightList, ...right];
			}

			this.ajax.load = true;
			this.ajax.loadTxt = '上拉加载更多';
			this.ajax.page++;
		},
		// 切换tab栏
		change(i){
			this.type = i
			this.ajax.page = 1;
			this.leftHeight = 0
			this.rightHeight = 0
			this.leftList = []
			this.rightList = []
			this.getList()
		},
		// 刷新
		shuaxincopy(a,b){
			var that = this
			if(a == 'right'){
				if(that.rightList[b].is_collection == 1){
					that.rightList[b].is_collection = 0
				}else{
					that.rightList[b].is_collection = 1
				}
			}else if(a == 'left'){
				if(that.leftList[b].is_collection == 1){
					that.leftList[b].is_collection = 0
				}else{
					that.leftList[b].is_collection = 1
				}
			}
		},
		// 点击收藏/取消收藏
		collection(i,a,b){
			var that = this
			if(!that.uid){
				uni.showToast({
				    title: '请前往授权登录',
					icon: 'none',
				    duration: 1000
				});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}, 1000);
			}else{
				that.$http.post('api/ZhCollection/clickCollection',{
					'marriage_seeking_id': i.authentication_id,
					'release_id': i.u_id
				}).then(res=> {
					uni.showToast({
						title: '操作成功',
						icon:'none'
					})
					if(a == 'right'){
						if(that.rightList[b].is_collection == 1){
							that.rightList[b].is_collection = 0
						}else{
							that.rightList[b].is_collection = 1
						}
					}else if(a == 'left'){
						if(that.leftList[b].is_collection == 1){
							that.leftList[b].is_collection = 0
						}else{
							that.leftList[b].is_collection = 1
						}
					}
					uni.$emit('refresh')
				})
			}
		},
		
	},
	//页面隐藏
	onHide() {
		
	},
	//页面卸载
	onUnload() {
		uni.$emit('refresh')
	},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.h-bg {
	width: 100%;
	padding: 196rpx 0 64rpx;
}
.uni-searchbar__box.data-v-1854464d {
	border: none !important;
}
.main {
	padding: 24rpx 30rpx;
	background-color: #fff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	margin-top: -50rpx;
	.bt {
		.qiehuan {
			.qiehuan-item {
				margin-right: 64rpx;
				.qiehuan-item-tit-com {
					display: flex;
					align-items: flex-end;
					font-family: PingFangSC-Light, PingFang SC;
					height: 56rpx;
					margin-bottom: 20rpx;
					vertical-align: baseline;
				}
				.qiehuan-item-tit {
					font-size: 28rpx;
					font-weight: 300;
					color: #6A6A7E;
				}
				.qiehuan-item-tit-on {
					font-size: 40rpx;
					font-weight: 600;
					color: #000013;
				}
				.qiehuan-item-icon {
					width: 20rpx;
					height: 10rpx;
					background: #7F5AFF;
					border-radius: 10rpx 10rpx 0 0;
				}
			}
		}
		.box-item {
			width: 300rpx;
			padding-left: 30rpx;
		}
	}
}

.waterfall-box {
	padding: 20rpx 10rpx;
	box-sizing: border-box;

	>view {
		padding: 0 10rpx;
	}
}

.h-flex-x {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	&.h-flex-2 {
		>view {
			width: 50%;
		}
	}
}

.load-txt{
	padding: 0 0 20rpx 0;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
</style>
